<template>
  <div 
    class="bgh" 
    style="min-height:100vh">
    <div 
      class="mui-input-row mui-search">
      <input 
        v-model="queryname" 
        type="search"
        class="mui-input-clear" 
        style="background:#fff;border-radius:0;padding-left:15px" 
        placeholder="搜索" 
        @input="dosearch">
    </div>

    <scroller 
      ref="my_scroller"
      :on-refresh="refresh" 
      :on-infinite="infinite" 
      style="margin-top:80px;bottom:80px">
      <div 
        v-for="(item, index) in zdList" 
        :key="index" 
        class="bgf zdcontent">
        <div class="zdimg">
          <img 
            :src="item.imagepath" 
            class="userimg2">
        </div>
        <div class="zdinfo">
          <p>
            <span>{{ item.itemname }}</span>
            <span>共{{ item.num }}次 第{{ item.usetimes }}次</span>
          </p>
          <p style="line-height:24px">{{ item.specsname }}</p>
          <p style="font-size:13px">
            消费门店： {{ item.sname }}
          </p>
          <p style="font-size:13px">{{ item.systime }}</p>
        </div>
      </div>
      
    </scroller>
  </div>
</template>

<script>
export default {
  layout: 'default2',
  data() {
    return {
      zdList: [],
      ts: this.newStore(),
      queryname: '',
      page: 1,
      pageSize: '10'
    }
  },
  created() {
    this.getzdList()
  },
  methods: {
    dosearch() {
      this.zdList = []
      const req = {
        token: localStorage.getItem('token'),
        query: this.queryname,
        page: '1',
        pageSize: '100000'
      }
      this.spost(this.ts, '/itemc/getusedlist', req).then(ts => {
        this.zdList = ts.d.data
      })
    },
    refresh(done) {
      this.page = 1
      this.getzdList(done)
      setTimeout(() => {
        this.$refs.my_scroller.finishPullToRefresh()
      }, 200)
    },
    infinite(done) {
      setTimeout(() => {
        this.page += 1
        this.getzdList(done)
      }, 500)
    },
    getzdList(fn) {
      const req = {
        token: localStorage.getItem('token'),
        query: this.queryname,
        page: this.page + '',
        pageSize: this.pageSize
      }
      this.spost(this.ts, '/itemc/getusedlist', req).then(ts => {
        if (ts.d.data.length < 1) {
          fn(true)
          return
        } else if (fn) {
          fn()
        }
        if (this.page == 1) {
          this.zdList = []
          this.zdList = ts.d.data
        } else {
          this.zdList = this.zdList.concat(ts.d.data)
        }
        // this.zdList = ts.d.data
      })
    }
  }
}
</script>

<style scoped>
.userimg2 {
  width: 100%;
}
.zdcontent {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  width: 96%;
  margin: 10px auto;
  border-radius: 5px;
}
.zdimg {
  width: 16%;
}
.zdinfo {
  width: 80%;
}
.zdinfo p {
  color: #333;
}
.zdinfo p:first-child {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}
.zdinfo p:last-child {
  font-size: 14px;
  color: #6b6b6b;
  display: flex;
  justify-content: space-between;
}
</style>
